<template>
    <div class="mineInfo">
        <Title2>
            <div slot="back">
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </div>
            <div slot="title">个人信息</div>
        </Title2>
        <div class="content">
            <Card4 >
                <div slot="title">头像</div>
                <div slot="cnt">
                    <img :src="userInfo.avatar" alt="" width="30px">
                </div>
                <div slot="icon" class="icon">
                    <van-icon  name="arrow" @click="imgShow=true"/>
                </div>
            </Card4>
            <van-popup
                v-model="imgShow"
                position="bottom"
                :style="{ height: '30%' }"
                class="img_popup"
            >
                <div>拍照</div>
                <div>从相册选择</div>
                <div>取消</div>
            </van-popup>
            <Card4>
                <div slot="title">昵称</div>
                <div slot="cnt">
                    {{userInfo.nickname}}
                </div>
                <div slot="icon" class="icon">
                    <van-icon  name="arrow" @click="ToUpdateUserInfo('nickname',userInfo.nickname)"/>
                </div>
            </Card4>
            <Card4>
                <div slot="title">手机号</div>
                <div slot="cnt">
                    {{userInfo.mobile}}
                </div>
            </Card4>
            <Card4>
                <div slot="title">性别</div>
                <div slot="cnt">
                    {{userInfo.sex==1?"女":"男"}}
                </div>
                <div slot="icon" class="icon">
                    <van-icon  name="arrow" @click="ToUpdateUserInfo('sex',userInfo.sex)" />
                </div>sex
            </Card4>
            <Card4>
                <div slot="title">出生日期</div>
                <div slot="cnt">
                    {{userInfo.birthday}}
                </div>
                <div slot="icon" class="icon">
                    <van-icon  name="arrow" @click="birthdayShow=true"/>
                </div>sex
            </Card4>
            <van-popup
                v-model="birthdayShow"
                position="bottom"
                :style="{ height: '30%' }"
                class="img_popup"
            >
                <van-datetime-picker
                    v-model="currentDate"
                    type="date"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @cancel="birthdayShow=false"
                    @confirm="saveBirthday"
                    />
            </van-popup>
            
            <Card4>
                <div slot="title">所在城市</div>
                <div slot="cnt">
                    {{userInfo.province_name}}，
                    {{userInfo.city_name}}，
                    {{userInfo.district_name}}
                </div>
                <div slot="icon" class="icon">
                    <van-icon  name="arrow" @click="getCities"/>
                </div>
            </Card4>
            <van-popup
                v-model="cityShow"
                position="bottom"
                :style="{ height: '30%' }"
                class="img_popup"
            >
                <van-area 
                    :area-list="areaList" 
                    :columns-num="3"
                    @change="changeAddress"
                    :value="''+userInfo.district_id"
                    @cancel="cityShow=false"
                    @confirm="selectedCity"
                />
            </van-popup>
            <div v-for="(item, index) in userInfo.attr" :key="index">
                <Card4>
                    <div slot="title">{{item.attr}}</div>
                    <div slot="cnt">
                        {{item.attr_value}}
                    </div>
                    <div slot="icon" class="icon">
                        <van-icon  name="arrow"  @click="setAttr(index)"/>
                    </div>
                </Card4>
            </div>
            <van-popup
                v-model="attrShow"
                position="bottom"
                :style="{ height: '30%' }"
                class="img_popup"
            >
                <van-picker 
                    show-toolbar
                    @cancel="attrShow=false"
                    @confirm="selectedAttr"
                    :columns="columns" 
                     />
            </van-popup>
        </div>
    </div>
</template>

<script>
import Title2 from '../components/common/Title2';
import Card4 from '../components/common/Card4';
import {getUserInfo,updateUser,getCity,otoCourseOptions} from '../untils/netWork';
    export default {
        data:()=>({
            userInfo:{},
            imgShow:false,
            birthdayShow:false,
            cityShow:false,
            attrShow:false,
            minDate: new Date(1990, 0, 1),
            maxDate: new Date(),
            currentDate: new Date(),
            areaList:{
                province_list: {},
                city_list: {},
                county_list: {}
            },
            columns: [
                
                {text:"初一",id:1},
                {text:"初二",id:2},
                {text:"初三",id:3},
                {text:"高一",id:4},
                {text:"高二",id:5},
                {text:"高三",id:6},
            ]
        }),
        components:{
            Title2,Card4,
        },
        mounted(){
            getUserInfo().then(res=>{
                this.userInfo=res.data;
            })
        },
        methods:{
            setAttr(index){
                if(index==0){
                    this.attrShow=true
                }else{
                    this.$router.push({
                        name:"UpdateUserInfo",
                        query:{
                            type:"attr",
                            data:this.userInfo.attr[1].attr_val_id,
                            payload:this.userInfo.attr[0]
                        }
                    })
                }
            },
            selectedAttr(value,index){
                this.attrShow=false
                var data={
                    user_attr:JSON.stringify([{"attr_id":1,"attr_val_id":value.id},{"attr_id":2,"attr_val_id":this.userInfo.attr[1].attr_val_id}]),
                }
                updateUser(data).then(res=>{
                    this.$set(this.userInfo.attr[0],"attr_value",value.text);
                })
            },
            selectedCity(arr,index){
                console.log(this.userInfo.district_id)
                this.cityShow=false;
                console.log(arr)
                var data={
                    province_id: arr[0].code,
                    city_id: arr[1].code,
                    district_id: arr[2].code
                };
                updateUser(data).then(res=>{
                    console.log(res);
                    this.$set(this.userInfo,"province_name",arr[0].name)
                    this.$set(this.userInfo,"city_name",arr[1].name)
                    this.$set(this.userInfo,"district_name",arr[2].name)
                })
                
            },
            async changeAddress(picker, data, index){
               switch (index) {
                   case 0:
                       var obj={};
                       const cities = (await getCity(data[index].code)).data;
                       cities.forEach(ele=>{
                           obj[ele.id]=ele.area_name
                       })
                    //    console.log(obj)
                        this.areaList.city_list=obj;
                        // var county=(getCity(cities[0]).code).data;
                        // console.log(county) 
                        obj={};
                        getCity(cities[0].id).then(res=>{
                            // console.log(res)
                            res.data.forEach(ele=>{
                                obj[ele.id]=ele.area_name
                            })
                            this.areaList.county_list=obj
                        })  
                                   
                       break;

                   case 1:
                       var obj={};
                       let county = (await getCity(data[index].code)).data;
                    //    console.log(county);
                       county.forEach(ele=>{
                           obj[ele.id]=ele.area_name
                       })
                        this.areaList.county_list=obj                       
                       break;
               
                   default:
                       break;
               }
                
            },
            async getCities(){
                this.cityShow=true;
                let obj = {};
                const province = (await getCity(0)).data;
                province.forEach(i => {
                    obj[i.id] = i.area_name;
                });
                this.areaList.province_list = obj;


                const provinceID = this.userInfo.province_id || province[0].id;
                const city = (await getCity(provinceID)).data;
                obj = {};
                city.forEach(i => {
                    obj[i.id] = i.area_name;
                });
                this.areaList.city_list = obj;

                const cityID = this.userInfo.city_id || city[0].id;
                console.log(cityID)
                const district = (await getCity(cityID)).data;
                obj = {};
                district.forEach(i => {
                    obj[i.id] = i.area_name;
                });
                this.areaList.county_list = obj;

                // if (!this.userInfo.district_id && district.length) {
                //     this.userInfo.district_id = district[0].id;
                // }
            },
            ToUpdateUserInfo(key,value){
                this.$router.push({
                    name:"UpdateUserInfo",
                    query:{
                        type:key,
                        data:value
                    }
                })
            },
            saveBirthday(){
                var date=this.fomart(this.currentDate);
                var params={
                    birthday:date
                }
                updateUser(params).then(res=>{
                    this.birthdayShow=false;
                    this.userInfo.birthday=date
                })
            },
            fomart(val){
                var year=new Date(val).getFullYear();
                var mouth=new Date(val).getMonth()+1;
                var day=new Date(val).getDate();
                return `${year}-${mouth}-${day}`
            }
            
        },
        activated(){
            getUserInfo().then(res=>{
                console.log(res.data)
                this.userInfo=res.data
            });
            // otoCourseOptions().then(res=>{
            //     console.log(res)
            //     // var arr=[];
            //     // res.data.attrList[0].child.forEach(ele=>{
            //     //     arr.push(ele.attr_val_name)
            //     // })
            //     // this.columns=arr
            // })
    

        }
        
    }
</script>

<style lang="scss" scoped>
.content{
    width: 90%;
    margin: 0 auto;
}
.img_popup{
    width: 100%;
    div{
        line-height: 66px;
        text-align: center;
        font-size: 16px;
        border-bottom: 1px solid rgb(245, 245, 245);
    }
}
</style>